<style>
  #header {
      background-color:black;
      color:white;
      text-align:center;
      padding:5px;
  }
  #nav {
      line-height:30px;
      background-color:#eeeeee;
      height:300px;
      width:100px;
      float:left;
      padding:5px;	      
  }
  #section {
      width:350px;
      float:left;
      padding:10px;	 	 
  }
  #footer {
      background-color:black;
      color:white;
      clear:both;
      text-align:center;
     padding:5px;	 	 
  }


  .forecast {
    margin: 0;
    padding: 0.3rem;
    background-color: #eee;
    font: 1rem 'Fira Sans', sans-serif;
}

.forecast > h1,
.day-forecast {
    margin: 0.5rem;
    padding: 0.3rem;
    font-size: 1.2rem;
}

.day-forecast {
    background: right/contain content-box border-box no-repeat url('/media/examples/rain.svg') white;
}

.day-forecast > h2,
.day-forecast > p {
    margin: 0.2rem;
    font-size: 1rem;
}



  </style>
  
  <div id="header"><h1>中国城市，City China</h1></div>
  <div id="nav">
    北京<br>
    上海<br>
    广东<br>
    深圳<br>
    重庆<br>
  </div>
  <div id="section">
    <h2>重庆市</h2>
    <p>
    “重庆,简称“渝”,别称山城,是中华人民共和国省级行政区、直辖市、国家中心城市、超大城市,国务院批复确定的中国重要的中心城市之一、长江上游地区经济中心、国家重要的现代制造业基地、西南地区综合交通枢纽”
    </p>
    <p>
    至2021年末，辖38个区县， 总面积8.24万平方千米， 常住人口3212.43万。
    </p>
  </div>
  
  <div id="footer">Copyright ? weiyigeek.top</div>

  <dialog open>
    <p>Greetings, one and all!</p>
    <form method="dialog">
      <button value="Yes">Yes</button>
      <button value="No">No</button>
    </form>
  </dialog>